<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>全景图</title>
  <style>
    body {
      margin: 0;
    }

    canvas {
      width: 100%;
      height: 100%
    }

    .nav {
      display: flex;
      position: fixed;
      bottom: 15px;
      height: 60px;
    }

    .nav span {
      flex: 1;
      text-align: center;
    }

    span img {
      width: 90%;
      height: 100%;
      border-radius: 10px;
    }
  </style>
</head>

<body>
  <script src="js/three.js"></script>
  <script src="./js/stats.min.js"></script>
  <script src="./js/OrbitControls.js"></script>
  <div class="nav">
    <span><img src="./img/001.jpg" alt=""></span>
    <span><img src="./img/002.jpg" alt=""></span>
    <span><img src="./img/003.jpg" alt=""></span>
    <span><img src="./img/004.jpg" alt=""></span>
    <span><img src="./img/005.jpg" alt=""></span>
  </div>
  <script>
    // 创建创建
    var scene = new THREE.Scene();
    // 创建透视相机
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    // 创建渲染器 
    var renderer = new THREE.WebGLRenderer({
      antialias: true
    });


    // 设置渲染器的尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);



    // 创建几何体
    var geometry = new THREE.SphereGeometry(10, 30, 30);

    geometry.scale(-1, 1, 1);
    // 创建材质 

    var mesh1 = null;
    var loader = new THREE.TextureLoader();

    function setLoader(url) {
      scene.remove(mesh1);
      loader.load(url, function (texture) {
        var material = new THREE.MeshPhongMaterial({
          map: texture,
          overdraw: 0.5,
          // side: THREE.DoubleSide
        });
        mesh1 = new THREE.Mesh(geometry, material);
        scene.add(mesh1);
        mesh1.position.set(0, 0, 0);
      });
    }


    setLoader('./img/002.jpg');





    // 点光源
    var light = new THREE.PointLight(0xffffff, 1, 1000);
    light.position.set(0, 3, 3);
    light.power = 10 * Math.PI;
    scene.add(light);

    var sphereSize = 1;
    var pointLightHelper = new THREE.PointLightHelper(light, sphereSize);


    var light = new THREE.AmbientLight(0xffffff); // soft white light
    scene.add(light);


    camera.position.y = 0;
    new THREE.OrbitControls(camera, renderer.domElement);

    camera.position.z = 1;

    // 动画  
    var animate = function () {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      // mesh.rotation.y += 0.01;
      if (mesh1) {
        mesh1.rotation.y += 0.001;
      }

    };

    animate();


    document.querySelectorAll('.nav span').forEach(v => {
      v.onclick = function () {
        var url = v.querySelector('img').src;
        setLoader(url);
      }
    })
  </script>
</body>

</html>